<!--
    
    例子
    <kmlc-form-select-user label="单选" select-type="single" v-model="selectData"></kmlc-form-select-user>
    <view>single:{{selectData}}</view>
    <kmlc-form-select-user label="多选" select-type="multiple" v-model="selectDataMul" ></kmlc-form-select-user>
    <view>multiple:{{selectDataMul}}</view>
	<kmlc-form-select-user label="多选" show-type='onlyShow' select-type="multiple" v-model="selectDataMul" ></kmlc-form-select-user>
    <view>multiple:{{selectDataMul}}</view>
  
    根据数据生成自定义组件
     {
        type: 'kmlc-form-select-user',
        key: '',
        select-type：String single/multiple 单选/多选
        label:String '标题'
        showType:String 'edit'(为可编辑模式)
        value: Array 默认显示数据/和接收到的数据
       
    }
-->
<template>
    <view>
        
        <tui-list-view title="" class="tui-list-view">
			<tui-list-cell  :arrow="showType=='edit'?true:false" :last="showType=='edit'?false:true" class="tui-list" @click="showType=='edit'&&gotoPage_(curData)">
				<text>{{curData.label}}</text>
                <text  class="tui-right" v-if="curData.type=='single'">{{selectData[0]&&selectData[0].label}}</text>
			</tui-list-cell>
		</tui-list-view>
		
        <tui-grid  v-if="selectType!='single'">
			<block v-for="(item,index) in selectData" :key="index">
				<tui-grid-item :cell="5" v-if="item.type=='user'">
					<view class="tui-grid-icon">
						<uni-icons  type="contact" color="#007aff" size="24" ></uni-icons>
					</view>
					<text class="tui-grid-label">{{item.label}}</text>
				</tui-grid-item>
			</block>
		</tui-grid>
       
    </view>
</template>

<script>
import {gotoPage} from '@/common/framework/utils/navigate.js'
export default {
    name:'kmlc-form-select-user',
    props:{
        emData:{
            type:Object,
            default:()=>{
                return {
                    
                }
            }
        },
        // label:{
        //     type:String,
        //     default:''
        // },
        // selectType:{
        //     type:String,
        //     default:'single'
        // },
        // showType:{
        //     type:String,
        //     default:'edit'
        // },
        // defaultSelect:{
        //     type:Array,
        //     default:[]
        // }
    },
    
    data(){
        return{
            curData:{
                title:"单选",
                type:"single",
                eventName:`treeSelEve-${Math.ceil(Math.random() * 10e5).toString(36)}`
            },
            
            url:"/pages/addressBook/tree-com/tree-com",
            _selectData:[],
            _label:"标题",
            _selectType:'single',
            _showType:'edit',
            _defaultSelect:[]
            
        }
    },
    created() {
        this.emData.selectData?this._selectData=this.emData.selectData:null;
        this.emData.label?this._label=this.emData.label:null;
        this.emData.selectType?this._selectType=this.emData.selectType:null;
        this.emData.showType?this._showType=this.emData.showType:null;
        this.emData.defaultSelect?this._defaultSelect=this.emData.defaultSelect:null;
        
        this.label?this.curData.label = this.label:null;
        !this.selectType?null:this.curData.type=this.selectType =='single' ?'single':'multiple';

    },
    mounted() {
        uni.$on(this.curData.eventName, this.recive)
    },
    beforeDestroy() {
        uni.$off(this.curData.eventName,this.recive)
    },
    methods: {
        gotoPage_(item){
            let key = this.getSelDataKeys();
            gotoPage(`${this.url}?type=${this.selectType}&eventName=${item.eventName}&defaultSelect=${key.keys.join(',')}&expentkeys=${key.parentKeys.join(',')}`);
        },
        recive(e) {
            console.log('recive:',e);
            this.selectData = e.data
            this.$emit('onChange',e.data);
        },
        getSelDataKeys(){
            let ret={
                keys:[],
                parentKeys:[]
            } 
            if(this.selectData && Array.isArray(this.selectData) && this.selectData.length){
                this.selectData.map(item=>{
                    ret.keys.push(item.id);
                    if(item.type!='user'){
                        ret.parentKeys.push(item.id);
                    }
                })
            }
            return ret;
        }
    },
    model: {
        prop: 'defaultSelect',
        event: 'onChange'
    },
}
</script>

<style lang="scss">
.tui-grid-icon {
		width: 64upx;
		height: 64upx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}

	.tui-grid-icon+.tui-grid-label {
		margin-top: 10upx;
	}

	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 30upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
    .tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
    }
    .tui-grids{
        background-color: #fff;
    }

</style>
